<style lang="less">
@import "../../styles/common.less";
@import "staff.less";
</style>

<template>
  <div class="margin-top-10">
    <Row type="flex" justify="space-between">
      <Row>
      </Row>
      <Row>
        <Input
          v-model="queryWord"
          @on-enter="searchStudent"
          placeholder="请输入姓名..."
          style="width: 150px;margin-right:3px"
        ></Input>
        <Button @click="searchStudent" type="primary">查询</Button>
      </Row>
    </Row>
    <div class="margin-top-10">
      <Table @on-selection-change="selectionChange" :columns="studentColumn" :data="studentData" :loading="tableLoading"></Table>
    </div>
    <Row type="flex" justify="end" class="margin-top-10">
      <Page
        :total="totalStudent"
        :current="currentPage"
        :page-size="pageSize"
        @on-change="getStudent"
        show-total
      >显示第{{currentIndex + 1}}-{{currentIndex + pageSize}}条，总数为{{totalStudent}}条</Page>
    </Row>


  </div>
</template>

<script>
import {
  getJiaYiStudents,
  updateJiaYiStudent,
} from "../../controllers/student";



import Tooltip from "../../../node_modules/iview/src/components/tooltip/tooltip";
import Btn from "../../../node_modules/iview/src/components/button/button";
import Constant from "../../libs/constants";
import _ from "lodash";
import pic from "../../images/upload.png";
import fakeAvatar from "../../images/default_avatar.png";
import DateUtils from "../../../node_modules/iview/src/utils/date";
import iconEdit from "../../images/edit.png";


export default {
  components: {
    Tooltip,
    Btn
  },
  data() {
    return {
      tableLoading: true,
      queryWord: "",
      pageSize: Constant.PAGE_SIZE,
      currentPage: 1,
      totalStudent: 0,
      studentColumn: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center',
        //   fixed:'left'
        // },
        {
          title: "学生id",
          align: "center",
          key: "s_id",
          width: 160
        },
        {
          title: "姓名",
          key: "u_nm",
          align: "center",
          width: 160
        },
        {
          title: "学生头像",
          key: "s_avatar_url",
          ellipsis: true,
          align: "center",
          width: 200,
          render: (h, {row}) => {
            return (
              <div>
                <img width="80px" height="80px" src={row.s_avatar_url} />
              </div>
            )
          }
        },
        {
          title: "集团",
          key: "group_name",
          align: "center",
          minWidth: 200
        },
        {
          title: "校区",
          key: "campus_name",
          align: "center",
          minWidth: 200
        },
        // {
        //   title: "操作",
        //   align: "center",
        //   minWidth: 200,
        //   render: (h, { row, column, index }) => {
        //     const _id = row._id;
        //     const user_name = row.user_name;
        //     return (
        //       <div class="operate-column">
        //           <Btn
        //             type="text"
        //             onClick={() => this.handleEditStudent(row)}
        //           >编辑</Btn>
        //       </div>
        //     );
        //   }
        // }
      ],
      studentData: [],
      selectionRows:[],
    };
  },
  computed: {
    currentIndex: function() {
      return (this.currentPage - 1) * this.pageSize;
    },
  },
  //待考虑：初次加载表格的时机
  created() {
    this.loadStudentData();
  },
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    getStudent(page) {
      this.currentPage = page;
      this.tableLoading = true;
      this.loadStudentData();
    },
    selectionChange(selection){
      this.selectionRows = selection
    },
    handleEditStudent(row) {
    },
    searchStudent() {
      this.currentPage = 1;
      this.tableLoading = true;
      this.loadStudentData();
    },
    loadStudentData() {
      this.selectionRows = [];
      getJiaYiStudents({
          page_num:this.currentPage, 
          page_size:this.pageSize, 
          name: this.queryWord
        })
        .then(res => {
          let { total, data } = res;
          this.totalStudent = data.total;
          this.studentData = data.result||[];
          this.tableLoading = false;
        })
    },
  }
};

</script>